<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <title>Echarts</title> -->
  <!-- <script src="./echarts-5.6.0.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"
    integrity="sha512-XSmbX3mhrD2ix5fXPTRQb2FwK22sRMVQTpBP2ac8hX7Dh/605hA2QDegVWiAvZPiXIxOV0CbkmUjGionDpbCmw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    .chart_box {
      /* width: 100%;
      height: 100%; */
      width: 500px;
      height: 500px;
      background: #1f4584;
    }
  </style>
</head>

<body>
  <div id="chartContainer" class="chart_box"></div>

  <script>
    const TAG = '[QD Echarts WEB]';

    window.myChart = null;
    let geoJSONObj = null;
    let optionObj = null;
    let registerClickBol = false;
    let h5Port;

    let lunarData = [["2025-10-01", 1, 100], ["2025-10-02", 1, 100], ["2025-10-03", 1, 100], ["2025-10-04", 1, 100], ["2025-10-05", 1, 100], ["2025-10-06", 1, 100], ["2025-10-07", 1, 100], ["2025-10-08", 1, 100], ["2025-10-09", 1, 92.3], ["2025-10-10", 1, 92.3], ["2025-10-11", 1, 100], ["2025-10-12", 1, 100], ["2025-10-13", 1, 100], ["2025-10-14", 1, 100], ["2025-10-15", 1, 100], ["2025-10-16", 1, 100], ["2025-10-17", 1, ""], ["2025-10-18", 1, ""], ["2025-10-19", 1, ""], ["2025-10-20", 1, ""], ["2025-10-21", 1, ""], ["2025-10-22", 1, ""], ["2025-10-23", 1, ""], ["2025-10-24", 1, ""], ["2025-10-25", 1, ""], ["2025-10-26", 1, ""], ["2025-10-27", 1, ""], ["2025-10-28", 1, "-"], ["2025-10-29", 1, ""], ["2025-10-30", 1, ""], ["2025-10-31", 1, "-"]]
    let heatMapData = [["2025-10-01", 100, "优"], ["2025-10-02", 100, "良"], ["2025-10-03", 100, "达标"], ["2025-10-04", 100, "未达标"], ["2025-10-05", 100, "离线"], ["2025-10-06", 100, "优"], ["2025-10-07", 100, "优"], ["2025-10-08", 100, "优"], ["2025-10-09", 92.3, "优"], ["2025-10-10", 92.3, "优"], ["2025-10-11", 100, "优"], ["2025-10-12", 100, "优"], ["2025-10-13", 100, "优"], ["2025-10-14", 100, "优"], ["2025-10-15", 100, "优"], ["2025-10-16", 100, "优"], ["2025-10-17", "-", "离线"], ["2025-10-18", "-", "离线"], ["2025-10-19", "-", "离线"], ["2025-10-20", "-", "离线"], ["2025-10-21", "-", "离线"], ["2025-10-22", "-", "离线"], ["2025-10-23", "-", "离线"], ["2025-10-24", "-", "离线"], ["2025-10-25", "-", "离线"], ["2025-10-26", "-", "离线"], ["2025-10-27", "-", "离线"], ["2025-10-28", "-", "离线"], ["2025-10-29", "-", "离线"], ["2025-10-30", "-", "离线"], ["2025-10-31", "1", "离线"]];

    let option = {
      "visualMap": {
        "show": false,
        "calculable": true,
        "orient": "horizontal",
        "left": "center",
        "categories": [
          "离线",
          "优",
          "良",
          "达标",
          "未达标",
        ],
        "color": [
          "#FF0000",
          "#FF7E00",
          "#FFFF00",
          "#7DF0B7",
          "#808080"
        ],
        // color: ['#ff0000', '#ff7e00', '#ffff00', '#7df0b7', '#808080'],

      },
      "calendar": {
        top: '17%',
        "left": "center",
        "cellSize": [
          "auto"
        ],
        "yearLabel": {
          "show": false
        },
        "orient": "vertical",
        "dayLabel": {
          "show": true,
          "nameMap": "ZH",
          "color": "#909090"
        },
        "monthLabel": {
          "show": false
        },
        "range": "2025-10",
        "splitLine": {
          "show": false
        },
        "itemStyle": {
          "borderWidth": 5,
          "borderColor": "#fff"
        }
      },
      "series": [
        {
          "type": "scatter",
          "coordinateSystem": "calendar",
          "symbolSize": 2,
          "label": {
            "show": true,
            formatter: `{@[0]}`,
            // formatter: (params) => {
            //    console.log(params, 'params');
            //    return new Date(params.value[0]).getDate() + '';
            // },
            "color": "#000",
          },
          "data": lunarData,
        },
        {
          "type": "scatter",
          "coordinateSystem": "calendar",
          "symbolSize": 2,
          "label": {
            "show": true,
            formatter: `\n\n\n{@[2]}%`,
            // formatter: (params) => {
            //    return '\n\n\n' + params.value[2] + '';
            // },
            "color": "#000",
            "fontSize": 8
          },
          "data": lunarData
        },
        {
          "type": "heatmap",
          "coordinateSystem": "calendar",
          "data": heatMapData
        }
      ]
    }

    window.addEventListener('message', (event) => {
      if (event.data === '__init_port__') {
        if (event.ports[0] !== null) {
          // 1. 保存从应用侧发送过来的端口。
          h5Port = event.ports[0];
          h5Port.onmessage = (eventTwo) => {
            // 2. 接收ets侧发送过来的消息。
            let msg = 'Got message from ets:';
            let result = eventTwo.data;

            if (typeof (result) === 'string') {
              console.info(`received string message from ets, string is: ${result}`);
              msg = msg + result;
            } else if (typeof (result) === 'object') {
              if (result instanceof ArrayBuffer) {
                console.info(`received arraybuffer from ets, length is: ${result.byteLength}`);
                msg = msg + 'length is ' + result.byteLength;
              } else {
                console.info('not support');
              }
            } else {
              console.info('not support');
            }
          }
        }
      }
    })

    // 3. 使用h5Port向应用侧发送消息。
    window.PostMsgToEts = (data) => {
      if (h5Port) {
        h5Port.postMessage(data);
      } else {
        console.error('h5Port is null, Please initialize first');
      }
    }

    window.initChart = () => {
      console.log(`${TAG} QD initChart 初始化图表`);
      window.myChart = echarts.init(document.getElementById('chartContainer'));
      console.log(`${TAG} QD paramObjName---`, JSON.stringify(paramObjName.getObj()))

      geoJSONObj = typeof paramObjName.getObj().geoJSON === 'string' ? JSON.parse(paramObjName.getObj().geoJSON) : geoJSON;
      optionObj = typeof paramObjName.getObj().chartOption == 'string' ? JSON.parse(paramObjName.getObj()
        .chartOption) : paramObjName.getObj().chartOption;

      // 使用刚指定的配置项和数据显示图表
      if (paramObjName.getObj().mapName && geoJSONObj) {
        echarts.registerMap(paramObjName.getObj().mapName, geoJSONObj);
        console.log("QD registerMap", paramObjName.getObj().mapName, paramObjName.getObj().geoJSON)
      }

      if (optionObj) {
        window.myChart.setOption(window.handleOption(optionObj));
        if (!registerClickBol) {
          registerClickBol = true;
          console.log(`${TAG} QD initChart 注册echarts 点击事件`);
          window.myChart.on('click', function (params) {
            console.log(`${TAG} QD click params`, JSON.stringify(params.value));
            PostMsgToEts(JSON.stringify({
              category: 'click',
              value: params.value
            }));
          });
        }
      }

      // window.myChart.setOption(option);
      // console.log(`${TAG} QD 注册echarts 点击事件`);
      // window.myChart.on('click', function (params) {
      //   console.log(`${TAG} QD click params`, params, JSON.stringify(params.value));
      // });

    }

    window.updateChart = (newOption) => {
      console.log(`${TAG} QD updateChart newOption`, JSON.stringify(newOption));
      window.myChart.setOption(window.handleOption(JSON.parse(JSON.stringify(newOption))));

      if (!registerClickBol) {
        registerClickBol = true;
        console.log(`${TAG} QD updateChart 注册echarts 点击事件`);
        window.myChart.on('click', function (params) {
          console.log(`${TAG} QD click params`, JSON.stringify(params.value));
          PostMsgToEts(JSON.stringify({
            category: 'click',
            value: params.value
          }));
        });
      }
    }

    window.handleOption = (option) => {
      if (option.series[0].name == '风速') {
        option.tooltip = {
          trigger: 'axis',
          formatter: (params) => {
            return [
              params[0].value[0],
              params[0].marker + `风速：${params[0].value[1] ? params[0].value[1] : '-'}`,
              params[0].value[2] ? `风向：${params[0].value[2] ? params[0].value[2] : '-'}` : ''
            ].join('<br />')
          },
        }
      }

      return option;
    }

    window.onload = () => {
      window.initChart();
    }
  </script>

</body>

</html>